<script setup lang="ts">
import CSSBox from "../components/CSSBox.vue";

const rings = 3;
</script>

<template>
  <CSSBox :TYPE="'CSS'">
    <div class="loader-wrapper w-full h-full">
      <div class="loader">
        <span></span>
        <div
          class="g-ring"
          :class="`g-ring-${item}`"
          v-for="item in rings - 1"
          :style="{
            width: `${(item / rings) * 100}%`,
            height: `${(item / rings) * 100}%`,
          }"
        />
      </div>
    </div>
  </CSSBox>
</template>
<style lang="less" scoped>
.loader-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .loader {
    width: 15rem;
    height: 15rem;
    background-color: #333;
    position: relative;
    border-radius: 50%;
    box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, 0.25),
      0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.25);
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .g-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid #666;
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #666;
    }
    &::before {
      content: "";
      position: absolute;
      width: 2px;
      height: 100%;
      background-color: #666;
    }

    // &::before {
    //   content: "";
    //   position: absolute;
    //   inset: 2rem;
    //   border-radius: 50%;
    //   border: 2px solid #666;
    //   box-shadow: inset -0.5rem -0.5rem 2.5rem rgba(0, 0, 0, 0.25),
    //     inset 0.5rem 0.5rem 3.5rem rgba(0, 0, 0, 0.25);
    //   z-index: 10;
    // }
    // &::after {
    //   content: "";
    //   position: absolute;
    //   width: 4rem;
    //   height: 4rem;
    //   border-radius: 50%;
    //   border: 2px solid #666;
    //   box-shadow: inset -0.5rem -0.5rem 2.5rem rgba(0, 0, 0, 0.25),
    //     inset 0.5rem 0.5rem 3.5rem rgba(0, 0, 0, 0.25);
    //   background-color: rgba(0, 0, 0, 0.15);
    //   z-index: 11;
    // }
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 100%;
      background-color: transparent;
      transform-origin: top left;
      overflow: hidden;
      animation: animate 2s linear infinite;
      &::before {
        content: "";
        position: absolute;
        top: 3rem;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #56ee8f;
        transform-origin: top left;
        transform: rotate(35deg);
        filter: blur(1rem) drop-shadow(5rem 5rem 5rem #f00);
        opacity: 0.75;
      }
    }
    .X {
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: #666;
    }
    .Y {
      position: absolute;
      width: 3px;
      height: 100%;
      background-color: #666;
    }
  }
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
